<template>
  <div class="demo-drawer__content">
    <div style="text-align: right" ref="otherComponentFrom">
      <el-button
          type="primary"
          plain
          style="right: 15px; position: relative"
          :disabled="isDisabled"
          @click="add"
      >新增
      </el-button>
    </div>
    <div class="tips">
      注：变量名称相同时优先级：局部变量 > 全局变量
    </div>
    <common-table class="common-table-list" :data="getList" isInputTable>
      <el-table-column label="变量名称" align="left" prop="name">
        <template slot-scope="scope">
          <span v-if="scope.row.variableType === '全部'">{{ scope.row.name }}</span>
          <common-input
              v-else
              v-model="scope.row.name"
              :disabled="isDisabled || scope.row.disabled"
              placeholder="请输入"
          ></common-input>
        </template>
      </el-table-column>

      <el-table-column label="变量类型" align="left" prop="type">
        <template slot-scope="scope">
          <span v-if="scope.row.variableType === '全部'">{{ getTypeValue(scope.row.type) }}</span>
          <el-select
              v-else
              filterable
              clearable
              v-model="scope.row.type"
              :disabled="isDisabled"
              placeholder="请选择">
            <el-option label="数字" value="number"></el-option>
            <el-option label="字符" value="string"></el-option>
            <el-option label="日期" value="date"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="默认值" align="left" prop="defaultValue">
        <template slot-scope="scope">
          <span v-if="scope.row.variableType === '全部'">{{ scope.row.defaultValue }}</span>
          <common-input
              v-else
              v-model="scope.row.defaultValue"
              :disabled="isDisabled"
              placeholder="请输入"
              :verify="false"
          ></common-input>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="85">
        <template slot-scope="scope">
          <el-button type="text" @click="del(scope.$index)" :disabled="isDisabled"
                     v-if="scope.row.variableType !== '全部'">删除
          </el-button>
        </template>
      </el-table-column>
    </common-table>
  </div>
</template>

<script>
import { globalList } from '@/api/screenConfig/global'
import { _deepClone } from '@/utils'
import { guid } from '@/utils'

export default {
  name: 'VariableConfig',
  components: {},
  props: {
    variableConfig: {
      type: Array,
      default: () => []
    },
    globalList: {
      type: Array,
      default: () => []
    },//全局变量
    isDisabled: {
      type: Boolean,
      default: () => false
    },//是否可编辑
    nodeData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      list: []
    }
  },
  computed: {
    getList() {
      return [...this.list, ...this.globalList]
    }
  },
  watch: {
    list: {
      handler: function(val) {
        this.$emit('changeVariableConfig', val)
      },
      deep: true
    }
  },
  methods: {
    add() {
      this.list.unshift({
        id: guid(),
        name: null,
        type: 'string',
        defaultValue: null,
        variableType: '局部',
        disabled: false
      })
    },
    del(index) {
      // this.list.splice(index, 1)
      console.log(this.checkVariableIsUser(this.list[index].name))

      if (this.checkVariableIsUser(this.list[index].name)) {
        this.$message({
          type: 'warning',
          message: '该变量已被绑定，请先删除sql语句中关联该变量语句！'
        })
      } else {
        this.list.splice(index, 1)
      }
    },
    //检测变量是否被使用
    checkVariableIsUser(variableName) {
      let flowData = this.nodeData.find(item => item.type === 'MysqlTableInput')
      if (flowData && flowData.option.sql) {
        let sql = flowData.option.sql
        let regex = new RegExp('\\{(.+?)\\}', 'g')
        let variableList = sql.match(regex) && sql.match(regex).map(f => f.replace(new RegExp('\\{|}', 'g'), ''))
        if (variableList && variableList.length) {
          return !!variableList.find(f => f === variableName)
        }
        // return variableList && variableList.length ? variableList.reduce((r, c) => {
        //   if (this.getAllVariableConfig.find(f => f.name === c)) {
        //     r.push(this.getAllVariableConfig.find(f => f.name === c).id)
        //   }
        //   return r
        // }, []).join(',') : ''
      }
    },
    init() {
      this.list = this.variableConfig.reduce((r, c) => {
        r.push({
          ...c,
          disabled: this.checkVariableIsUser(c.name)
        })
        return r
      },[])
      console.log(this.list)
    },
    getTypeValue(type) {
      let label
      switch (type) {
        case 'number': // 每秒
          label = '数字'
          break
        case 'string': // 年期
          label = '字符'
          break
        case 'date': // 年期
          label = '日期'
          break
      }
      return label
    },

    checkFormBeforeClose() {
      if (!this.list.length) return 'ok'

      let msg
      this.list.forEach(item => {
        if (!item.name || !item.type) {
          msg = '请填写完整变量信息，或者清除不需要填写的信息！'
        } else if (item.type && (item.type !== 'string') && !item.defaultValue) {
          msg = '数字类型或者时间类型需要填写默认值'
        } else if (this.list.filter(f => f.name === item.name).length > 1) {
          msg = '局部变量名称不能重复!'
        }
      })
      if (msg) {
        this.$message({ type: 'warning', message: msg })
      } else {
        return 'ok'
      }
    }
  },
  mounted() {
  }
}
</script>

<style scoped lang="scss">
.demo-drawer__content {
  height: 100%;
  width: 100%;
  padding: 0 16px 16px 16px;
  user-select: text;
  -webkit-user-select: text;
  -moz-user-select: text;

  .common-table-list {
    height: calc(100% - 32px) !important;
  }

  .tips {
    color: #F56C6C;
    font-size: 12px;
    padding-left: 10px;
  }
}
</style>
